<template>
  <div class="card">
    <div class="header">
      <div class="col">
        <div>
          <span class="title">资产总量</span>
          <span class="proportion" :class="tjzl.ZCZTS_HBZZ >= 0 ? 'text-success' : 'text-error'">
            环比去年&nbsp;{{ `${tjzl.ZCZTS_HBZZ >= 0 ? '+' : '-'}${(tjzl.ZCZTS_HBZZ * 100).toFixed(2)}%` }}</span
          >
        </div>
        <div>
          <vue-count-up class="count" :start-value="0" :end-value="tjzl.ZCZTS" />
          <span class="unit">条</span>
        </div>
      </div>
      <div class="col">
        <div>
          <span class="title">房源总量</span>
          <span class="proportion" :class="tjzl.FWZCTS_HBZZ >= 0 ? 'text-success' : 'text-error'">
            环比去年&nbsp;{{ `${tjzl.FWZCTS_HBZZ >= 0 ? '+' : '-'}${(tjzl.FWZCTS_HBZZ * 100).toFixed(2)}%` }}</span
          >
        </div>
        <div>
          <vue-count-up class="count" :start-value="0" :end-value="tjzl.FWZCTS" />
          <span class="unit">条</span>
        </div>
      </div>
      <div class="col">
        <div>
          <span class="title">非房屋类资产总量</span>
          <span class="proportion" :class="tjzl.GDZCTS_HBZZ >= 0 ? 'text-success' : 'text-error'">
            环比去年&nbsp;{{ `${tjzl.GDZCTS_HBZZ >= 0 ? '+' : '-'}${(tjzl.GDZCTS_HBZZ * 100).toFixed(2)}%` }}</span
          >
        </div>
        <div>
          <vue-count-up class="count" :start-value="0" :end-value="tjzl.GDZCTS" />
          <span class="unit">条</span>
        </div>
      </div>
    </div>
    <div style="position: relative">
      <echarts-view ref="echarts" :options="option" height="624px"></echarts-view>
      <y-button style="position: absolute; right: 0; bottom: 10px" v-if="isArea" @click="handleBack">返回</y-button>
    </div>
  </div>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import AMapLoader from '@amap/amap-jsapi-loader'
import { getProjectList } from '@/api/asset'
import VueCountUp from 'vue-countupjs'
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import * as echarts from 'echarts'
import { getZLTJ } from '@/api/datacharts'
export default {
  components: {
    headerTitle,
    echartsView,
    VueCountUp
  },
  data () {
    return {
      option: {},
      isArea: false,
      tjzl: {
        FWZCTS: '0',
        FWZCTS_HBZZ: 0,
        GDZCTS: '0',
        GDZCTS_HBZZ: 0,
        ZCZTS: '0',
        ZCZTS_HBZZ: 0
      }
    }
  },
  mounted () {
    this.init()
    this.fetchData()
  },
  methods: {
    fetchData () {
      getZLTJ().then((res) => {
        this.tjzl = res[0]
      })
    },
    init () {
      getProjectList({
        pageIndex: 1,
        pageSize: 999999,
        userid: this.$store.getters.userid,
        mode: 'ALL',
        strContent: {}
      }).then((porjectRes) => {
        AMapLoader.load({
          key: 'ff9f0eb301a6eac7877e8ebf01e3579a', // 申请好的Web端开发者Key，首次调用 load 时必填
          version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
          AMapUI: {
            version: '1.1',
            plugins: ['geo/DistrictExplorer']
          }
        }).then((AMap) => {
          // eslint-disable-next-line no-undef
          const districtExplorer = new AMapUI.DistrictExplorer()
          // 获取行政区域
          const getGeoJson = (adcode) => {
            return new Promise((resolve, reject) => {
              districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
                if (error) {
                  reject(error)
                  return
                }
                let Json = areaNode.getSubFeatures()
                const mapJson = {
                  type: 'FeatureCollection',
                  features: []
                }
                if (Json.length === 0) {
                  Json = drawMap.getJson.features.filter((item) => item.properties.adcode === adcode)
                }
                mapJson.features = Json
                resolve(mapJson)
              })
            })
          }
          // 获取数据
          const getChartData = (val) => {
            let data = []
            getGeoJson(val).then((res) => {
              data = res.features.map((e) => {
                return {
                  adcode: e.properties.adcode,
                  name: e.properties.name,
                  value: (Math.random() * 100).toFixed(2)
                }
              })
              drawMap(res, data)
            })
          }
          // 挂载 方便外部调用
          this.init.getChartData = getChartData

          const drawMap = (map, data) => {
            drawMap.getJson = map
            echarts.registerMap('zyxh', map)
            this.option = {
              tooltip: {
                show: false,
                trigger: 'item',
                backgroundColor: 'rgba(255,255,255,0)',
                borderWidth: 0,
                enterable: true,
                padding: 0,
                formatter: (params) => {
                  const {
                    name,
                    data: { value }
                  } = params
                  const html = `
            <div class="map-tooltip-item">
              <div class="region">
                <span class="name">${name}</span>
                <span class="count">${value[0]}条</span>
              </div>
              <div class="row">
                <div class="col lease">
                  <div class="label">出租中</div>
                  <div>
                    <span class="count">${value[1]}</span>
                    <span class="unit">套</span>
                  </div>
                </div>
                <div class="col vacant">
                  <div class="label">空置中</div>
                  <div>
                    <span class="count">${value[2]}</span>
                    <span class="unit">套</span>
                  </div>
                </div>
              </div>
            </div>
           `
                  return html
                }
              },
              geo: {
                center: undefined,
                zoom: 1,
                layoutCenter: ['50%', '50%'],
                layoutSize: '96%',
                map: 'zyxh',
                show: true,
                animationDurationUpdate: 0,
                // roam: true,
                label: {
                  emphasis: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    areaColor: '#091632',
                    borderColor: '#1773c3',
                    shadowColor: '#1773c3',
                    shadowBlur: 20
                  }
                }
              },
              series: [
                {
                  center: undefined,
                  zoom: 1,
                  animationDurationUpdate: 0,
                  roam: 'scale',
                  layoutCenter: ['50%', '50%'],
                  layoutSize: '96%',
                  geoIndex: 1,
                  name: '遵义市',
                  type: 'map',
                  map: 'zyxh',
                  label: {
                    show: true,
                    color: 'white',
                    fontSize: 10
                  },
                  itemStyle: {
                    normal: {
                      borderWidth: 2, // 边际线大小
                      borderColor: '#2576b4', // 边界线颜色
                      areaColor: '#113f7d' // 默认区域颜色
                    },
                    emphasis: {
                      show: true,
                      areaColor: '#3066ba', // 鼠标滑过区域颜色
                      label: {
                        show: true,
                        textStyle: {
                          color: '#fff'
                        }
                      }
                    }
                  },
                  data
                },
                {
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  showEffectOn: 'render',
                  zlevel: 1,
                  // roam: true,
                  rippleEffect: {
                    period: 15,
                    scale: 4,
                    brushType: 'fill'
                  },
                  hoverAnimation: true,
                  tooltip: {
                    show: false
                  },
                  label: {
                    normal: {
                      position: 'top',
                      offset: [15, 0],
                      color: '#1DE9B6',
                      show: true,
                      formatter: '{b}'
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#1DE9B6',
                      shadowBlur: 20,
                      shadowColor: '#333'
                    }
                  },
                  symbolSize: 12,
                  data: porjectRes.data.map((e) => {
                    return {
                      name: e.XM_MC,
                      value: [e.XM_JD, e.XM_WD]
                    }
                  })
                }
              ]
            }
          }
          getChartData(520300)
          this.$refs.echarts.chart.on('click', (params) => {
            console.log('click', params)
            const {
              data: { adcode },
              componentSubType,
              seriesType
            } = params
            if (componentSubType === 'map' && seriesType === 'map' && !this.isArea) {
              this.isArea = true
              getChartData(adcode)
            }
          })
          this.$refs.echarts.chart.on('georoam', (params) => {
            console.log('georoam', params)
            const option = this.$refs.echarts.chart.getOption()
            if (params.zoom !== null && params.zoom !== undefined) {
              // 捕捉到缩放时
              option.geo[0].zoom = option.series[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
              option.geo[0].center = option.series[0].center // 下层的geo的中心位置随着上层geo一起改
            } else {
              // 捕捉到拖曳时
              option.geo[0].center = option.series[0].center // 下层的geo的中心位置随着上层geo一起改变
            }
            this.option = option
          })
        })
      })
    },
    handleBack () {
      this.init.getChartData(520300)
      this.isArea = false
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 724px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    .col {
      flex: 1;
      text-align: center;
      .title {
        font-size: 16px;
        font-weight: bold;
      }
      .proportion {
        font-size: 12px;
        margin-left: 10px;
      }
      .count {
        font-size: 36px;
      }
    }
  }
  &-content {
    margin-top: 20px;
  }
}
</style>
<style lang="less">
.map-tooltip-item {
  background-image: url('../../../assets/images/map-tooltip.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  width: 240px;
  height: 130px;
  padding: 25px;
  overflow: hidden;
  .region {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    .name {
      display: inline-block;
      max-width: 50%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 06px;
    .lease {
      color: rgba(0, 254, 229, 1);
    }
    .vacant {
      color: rgba(255, 50, 50, 1);
    }
    .col {
      flex: 1;
      .label {
        font-size: 14px;
        margin-bottom: 6px;
      }
      .count {
        font-size: 20px;
        font-weight: bold;
      }
      .unit {
        font-size: 14px;
        margin-left: 6px;
      }
    }
  }
}
</style>
